<template>
  <!-- 全屏大框 -->
  <footer class="footer-wrapper">
    <!-- 居中小框 -->
    <div :class="['footer-body',size]">
      <div class="footer_link-wrapper">
        <template v-for="(footerLink,index) in footerLinks">
          <itemFooterLink :key="index" :links="footerLink.links" :title="footerLink.title" />
        </template>
      </div>
      <div class="footer_info-wrapper">
        <div class="footer-partner">
          <p>
            <template>互联网ICP备案: &nbsp;</template>
            <a href="http://beian.miit.gov.cn/" target="_blank">{{value.ICP}}</a>
            <template>&nbsp; | 违法不良信息举报邮箱：{{value.email}}</template>
            <template>&nbsp; | 联系邮箱：{{value.email}}</template>
          </p>
          <p :key="temp" v-for="temp in value.contexts">{{temp}}</p>
          <p>
            <template>&copy; {{copy}}</template>&nbsp;--
            <a :href="origin">{{ hostname }}</a>&nbsp;--
          </p>
        </div>
        <div class="footer_icon-wrapper">
          <mivaLink :to="appUrl" class="footer-icon app">
            <i class="miva-footer-font miva-footer-icon_download" />
            <template>客户端下载</template>
            <div :style="appQRCode | createQRCode" class="qrcode" />
          </mivaLink>
          <mivaLink :to="wbUrl" class="footer-icon weibo">
            <i class="miva-footer-font miva-footer-icon_weibo" />
            <template>新浪微博</template>
            <div :style="wbQRCode | createQRCode" class="qrcode" />
          </mivaLink>
          <mivaLink class="footer-icon qq">
            <i class="miva-footer-font miva-footer-icon_wechat" />
            <template>官方微信</template>
            <div :style="wxQRCode | createQRCode" class="qrcode" />
          </mivaLink>
          <mivaLink :to="qqUrl" class="footer-icon qq">
            <i class="iconfont icon-qq" />
            <template>官方QQ群</template>
            <div :style="qqQRCode | createQRCode" class="qrcode" />
          </mivaLink>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
import itemFooterLink from './components/footer-link.vue';
import defaultValue from './defaultValue.json';
import qqQRCode from '@/assets/qqQRCode.png';
import QRCode from '@/utils/qrcode';
import '@/styles/footer-icon.css';

export default {
    components: {
        itemFooterLink,
    },
    filters: {
        createQRCode(href) {
            return `background-image:url(${href})`;
        },
    },
    props: {
        size: {
            type: String,
            default: '',
        },
        appUrl: {
            type: String,
            default: defaultValue.appUrl,
        },
        wbUrl: {
            type: String,
            default: defaultValue.wbUrl,
        },
        wxUrl: {
            type: String,
            default: defaultValue.wxUrl,
        },
        qqUrl: {
            type: String,
            default: defaultValue.qqUrl,
        },
        qqQRCode: {
            type: String,
            default: qqQRCode,
        },
        value: {
            type: Object,
            default: () => defaultValue.extend,
        },
        footerLinks: {
            type: Array,
            default: () => defaultValue.footerLinks,
        },
    },
    data() {
        return {
            appQRCode: '',
            wbQRCode: '',
            wxQRCode: '',
        };
    },
    computed: {
        origin() {
            return window.location.origin;
        },
        hostname() {
            return window.location.hostname;
        },
        copy() {
            return ` 2016 - ${new Date().getFullYear()}`;
        },
    },
    async mounted() {
        this.wbQRCode = await QRCode(this.wbUrl);
        this.appQRCode = await QRCode(this.appUrl);
        this.wxQRCode = await QRCode(this.wxUrl);
    },
};
</script>

<style lang="less">
.footer-wrapper {
  width: 100%;
  height: @footerHeight;
  user-select: none;
  position: relative;
  &::before {
    content: "";
    width: 100%;
    height: calc(100% + 35px);
    display: block;
    position: absolute;
    top: -35px;
    background-image: url("~@/assets/footer.png");
    background-repeat: repeat-x;
    background-size: 1160px;
    user-select: none;
    pointer-events: none;
    animation: footerRun 40s linear infinite;
  }
}
.footer-body {
  max-width: @bigWidth;
  min-width: @baseWidth;
  margin: 0 auto;
  padding: 50px 0 10px;

  &.small {
    width: @baseWidth;
  }
}

.footer_link-wrapper {
  position: relative;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.footer-partner {
  position: relative;
  line-height: 2;
  color: #fff;
  a {
    text-decoration-line: underline;
    color: #fff;
    &:hover {
      color: #000;
    }
  }
}

.footer_info-wrapper {
  display: flex;
  justify-content: space-between;
}

.footer_icon-wrapper {
  width: 300px;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;

  .footer-icon {
    width: 70px;
    padding: 0 20px;
    position: relative;
    box-sizing: initial;
    text-align: center;
    color: #fff;
    .qrcode {
      width: 117px;
      height: 117px;
      padding: 10px;
      position: absolute;
      right: 0;
      bottom: 110%;
      background: #a6daf0 no-repeat center / cover;
      transition: 0.3s all;
      transform: translateX(-50px);
      pointer-events: none;
      opacity: 0;
    }

    .iconfont,
    .miva-footer-font {
      font-size: 40px;

      &::before {
        display: block;
        transition: all 0.3s;
      }
    }
    &:hover {
      .iconfont::before,
      .miva-footer-font::before {
        transform: scale(1.2) rotateZ(45deg);
      }

      .qrcode {
        opacity: 1;
        transform: translateX(0);
      }
    }
  }

  // .miva-footer-icon_weibo {
  //   color: #fe596c;
  // }
  // .miva-footer-icon_wechat {
  //   color: #42c86b;
  // }
  // .icon-qq {
  //   color: #458acf;
  // }
}
@keyframes footerRun {
  to {
    background-position-x: 1160px;
  }
}
</style>
